<template>
  <div class="zh-login">
    <div class="zh-logo">
      <img src="../../assets/images/logo.png" alt="">
    </div>
    <div class="zh-login-form">
      <div class="zh-form-item">
        <div class="zh-label">
          <span class="fa fa-user"></span>
        </div>
        <input type="text" placeholder="请输入手机号" v-model.trim="form.username">
      </div>
      <div class="zh-form-item">
        <div class="zh-label">
          <span class="fa fa-lock"></span>
        </div>
        <input type="password" placeholder="请输入密码" v-model.trim="form.password">
      </div>
      <div class="zh-form-item zh-other">
        <a calss="zh-register" href="javascript:;">注册会员</a>
        <a class="zh-forget" href="javascript:;">忘记密码?</a>
      </div>
      <button type="button" @click="handleLogin">登录</button>
    </div>
  </div>
</template>

<script>
import render from './render';
export default render
</script>

<style lang="scss">
.zh-login {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(top, #ae9dff, #26A2FF);
  background-size: cover;
  .zh-footer-effect {
    position: absolute;
    z-index: 2;
    left: -30%;
    right: 0;
    bottom: -10%;
    height: 300px;
    width: 100%;
    background-color: rgba(255,255,255,0.03);
    border-radius: 50%;
    transform: rotate(45deg);
    li {
      position: absolute;
      right: -20%;
      bottom: 0;
      border-radius: 50%;
      width: 50%;
      height: 100%;
      background-color: rgba(255,255,255,0.03);
    }
  }
  .zh-logo {
    padding-top: 35%;
    img {
      display: block;
      margin: 0 auto;
      width: 20%;
    }
  }
  .zh-login-form {
    padding: 50px 100px;
    button {
      width: 100%;
      height: 80px;
      margin-top: 30px;
      background-color: rgba(255,255,255,0.9);
      border-radius: 5px;
      font-size: 30px;
      color: #26a2ff;
      &:hover {
        opacity: 0.9;
      }
      &:active {
        opacity: 0.75;
      }
    }
  }
  .zh-form-item {
    display: flex;
    background-color: rgba(0,0,0,0.1);
    border-radius: 5px;
    margin-top: 30px;
    .zh-label {
      padding-left: 20px;
      line-height: 80px;
    }
    .fa {
      font-size: 32px;
      color: #fff;
      vertical-align: middle;
    }
    input {
      flex: 1;
      height: 80px;
      line-height: 80px;
      padding: 0 10px;
      font-size: 28px;
      color: #fff;
      background: none;
      border: none;
      &:focus {
        outline: none;
      }
    }
    input::-webkit-input-placeholder { 
      font-size: 28px;
      color: #ccc;
    } 
    input::-moz-placeholder { 
      font-size: 28px;
      color: #ccc;
    } 
    input:-ms-input-placeholder { 
      font-size: 28px;
      color: #ccc;
    }
  }
  .zh-other {
    background: none;
    a {
      flex: 1;
      font-size: 28px;
      color: #fff;
    }
    .zh-forget {
      text-align: right;
    }
  }
}
</style>
